<template>
  <div class="app-container">

    <el-form ref="ruleForm"
             :model="ruleForm"
             :rules="rules"
             label-width="100px"
             class="demo-ruleForm">

      <el-form-item label="分类名称"
                    prop="name">
        <el-input v-model="ruleForm.name"
                  maxlength="10"
                  show-word-limit
                  placeholder="输入分类名称" />
      </el-form-item>

      <!-- <el-form-item label="排序值"
                    prop="sort">
        <el-input v-model="ruleForm.sort"
                  placeholder="数值越大排列越靠前" />
      </el-form-item> -->
      <el-form-item label="备注"
                    prop="description">
        <el-input v-model="ruleForm.description"
                  type="textarea"
                  placeholder="类型描述"
                  maxlength="100"
                  show-word-limit
                  rows="6" />
      </el-form-item>
      <el-form-item label="状态"
                    prop="status">
        <el-radio v-model="ruleForm.status"
                  :label="1">启用</el-radio>
        <el-radio v-model="ruleForm.status"
                  :label="0">禁用</el-radio>
      </el-form-item>
      <el-form-item>
        <el-button type="primary"
                   style="width:100px"
                   size="small"
                   icon="el-icon-document"
                   @click="submitForm('ruleForm')">提交</el-button>
        <el-button type="danger"
                   v-if="isEdit"
                   @click="deleteCate"
                   icon="el-icon-s-release">删除</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
// import {switchCateStatus, delCate, addCate, editCate, getCateDetail} from '@/api/product'
import {getCateDetail,editCate,addCate} from '@/api/hopeTravel/category'
export default {
  name: 'CreateCate',
  props: {
    isEdit: {
      type: Boolean,
      default: false,
    },
  },
  data() {
    return {
      tempRoute: {},
      ruleForm: {
        name: '',
        sort: '',
        description: '',
        status: 1,
      },
      rules: {
        name: [{required: true, message: '请输入品牌名称', trigger: 'blur'}],
        // sort: [{required: true, message: '请输入排序', trigger: 'blur'}],
      },
    }
  },
  created() {
    if (this.isEdit) {
      this.getCatedetail()
    }
    this.tempRoute = Object.assign({}, this.$route)
  },
  methods: {
    //获取分类信息
    getCatedetail() {
      getCateDetail(this.$route.params.id).then(res => {
        if (res.code === 0) {
          this.ruleForm = res.data
          this.setTagsViewTitle()
          this.setPageTitle()
        }
      })
    },
    setTagsViewTitle() {
      const title = '编辑分类'
      const route = Object.assign({}, this.tempRoute, {title: `${title}-${this.ruleForm.id}`})
      this.$store.dispatch('tagsView/updateVisitedView', route)
    },
    setPageTitle() {
      const title = '编辑分类'
      document.title = `${title} - ${this.ruleForm.id}`
    },

    //删除该分类
    deleteCate() {
      this.$confirm('是否删除该分类?', '提示', {
        type: 'warning',
      }).then(() => {
        delCate(this.$route.params.id).then(res => {
          if (res.code == 0) {
            this.$notify({
              message: '删除成功',
              type: 'success',
              duration: 2000,
            })
            this.$store.dispatch('tagsView/delView', this.tempRoute).then(({visitedViews}) => {
              this.$router.push({path: '/product/category/list'})
            })
          }
        })
      })
    },
    submitForm(formName) {
      this.$refs[formName].validate(valid => {
        if (valid) {
          if (this.isEdit) {
           
            editCate(this.$route.params.id, this.ruleForm).then(res => {
              if (res.code == 0) {
                this.$notify({
                  message: '编辑分类提交成功',
                  type: 'success',
                  duration: 2000,
                })
                this.$store.dispatch('tagsView/delView', this.tempRoute).then(({visitedViews}) => {
                  this.$router.push({path: '/product/category/list'})
                })
              }
            })
          } else {
            delete this.ruleForm.id
            addCate(this.ruleForm).then(res => {
              if (res.code === 0) {
                this.$notify({
                  message: '新增分类提交成功',
                  type: 'success',
                  duration: 2000,
                })
                this.$store.dispatch('tagsView/delView', this.tempRoute).then(({visitedViews}) => {
                  this.$router.push({path: '/product/category/list'})
                })
              }
            })
          }
        }
      })
    },
  },
}
</script>
<style lang="scss" scoped>
.demo-ruleForm {
  width: 50%;
  margin: 0 auto;
  .padding-form {
    padding-left: 30%;
    margin-bottom: 30px;
  }
}
</style>
